<template>
	<view class="xbd-date">
		<view class="above" @click="changeMonth('pre')">
			<uni-icons type="arrowleft" size="14" color="#457AFF"></uni-icons>
			&nbsp;&nbsp;
			上个月
		</view>
		<!-- #ifdef APP-PLUS || H5 -->
		<picker mode="date" :value="date" fields="month" :start="startDate" :end="endDate" @change="bindDateChange">
			<view class="month">
				{{ date }}
			</view>
		</picker>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<xbd-date-picker fields="month" :date="date" :visible.sync="visible" @setDate="setDate">
			<template>
				<view class="month" @click="visible = true">
					{{ date }}
				</view>
			</template>
		</xbd-date-picker>
		<!-- #endif -->
		<view :class="['under', isDisabled ? 'disabled' : '']" @click="changeMonth('next')">
			下个月
			&nbsp;&nbsp;
			<uni-icons type="arrowright" size="14" :color="isDisabled ? '#999999' : '#457AFF'"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'XbdDate',
		props: {
			date: String
		},
		data() {
			return {
				visible: false
			};
		},
		computed: {
			// 开始时间
		    startDate() {
		        return this.getDate('start');
		    },
			// 结束时间
		    endDate() {
		        return this.getDate('end');
		    },
			maxDate() {
				return +new Date(this.startDate);
			},
			minDate() {
				return +new Date(this.endDate);
			},
			// 是否禁用
			isDisabled() {
				let date = new Date();
				let nowY = date.getFullYear();
				let nowM = date.getMonth() + 1;
				let [y, m] = this.date.split('-');
				[y, m] = [Number(y), Number(m)];
				if (nowY === y) {
					if (nowM <= m) {
						return true;
					} else {
						return false;
					}
				} else {
					return false;
				}
			}
		},
		methods: {
			cancel() {
			},
			confirm(e) {
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
		
			    if (type === 'start') {
			        year = year - 60;
			    } else if (type === 'end') {
			        year = year;
			    }
			    month = month > 9 ? month : '0' + month;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			},
			bindDateChange(e) {
				// this.date = e.target.value
				this.$emit('update:date', e.target.value);
			},
			setDate(date) {
				this.$emit('update:date', date);
			},
			changeMonth(type){
				let [y, m] = this.date.split('-');
				[y, m] = [Number(y), Number(m)];
			    if(type=='pre'){
			       if (m + 1 == 2) {
			           m = 12;
			           y = y - 1;
			       } else {
			           m = m - 1;
			       } 
			    }else{
					if (!this.isDisabled) {
						if (m + 1 == 13) {
						    m = 1;
						    y = y + 1;
						} else {
						    m = m + 1;
						}
					}
			    }
				if (m < 10) {
					m = '0' + m;
				}
				const date = y + '-' + m;
				this.$emit('update:date', date);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xbd-date {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		font-size: 14px;
		
		color: $uni-color-primary;
		.disabled {
			color: #999999;
		}
	}
</style>
